<template>

    <div  class="container">
        <div class="columns is-centered">
            <div class="column is-5-desktop is-4-fullhd">
                <div class="box mt-6">
                    <p class="subtitle has-text-centered">电商后台管理系统</p>
                    <!-- <h1 class="title is-size-3 has-text-centered">BookShop</h1> -->
                    <!-- <div class=" dropdown-divider"></div> -->
                    <form action="/login" method="post">
                        <div class="mb-2">
                            <div class="field is-floating-label">
                                <!-- 账号图标 -->
                                <label class="label"><i class="fa fa-user" aria-hidden="true"></i></label>
                                <div class="control is-clearfix">
                                    <input type="text" autocomplete="username" maxlength="150" name="u"
                                        autofocus="autofocus" autocapitalize="none" required="required" id="id_username"
                                        class="input" placeholder="请输入用户名或邮箱">
                                    <small class="help counter is-invisible"> 5 / 150 </small>
                                </div>
                            </div>
                        </div>
                        <div class="mb-2">
                            <!-- 密码图标 -->
                            <div class="field is-floating-label"><label class="label"><i class="fa fa-lock"
                                        aria-hidden="true"></i></label>
                                <div class="control is-clearfix">
                                    <input type="password" autocomplete="current-password" name="p" required="required"
                                        id="id_password" class="input" placeholder="请输入密码">
                                </div>
                            </div>
                        </div> <input type="hidden" name="next" value=""> <input type="hidden" name="next" value="">
                        <div class="mb-2" style="margin-top: 20px;"><label
                                style="color: rgba(80, 197, 226, 0.5); font-size: 1em; font-weight: 600;">&nbsp;验证码：</label>
                            <input name="c" type="text" autocomplete="off" style="width: 109px; height: 33px;">
                            <img src="/code" id="ccc"
                                style="width: 135px; height: 33px; vertical-align: -9px; margin-left: 12px;"> <a
                                href="javascript:void(0)" @click="changCode"
                                style="font-size: 4px; margin-left: 14px;">换一张</a>
                        </div>
                        <div class="is-size-7 has-text-grey-light mb-3"><a @click="changeFormTypeByLogin">忘记了您的密码或用户名？</a>
                        </div>
                        <input type="submit" value="登录" class=" button is-fullwidth is-primary">
                    </form>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
module.exports = {
    data() {
        return {
                loginFlag: true,
        }
    },
    methods: {
        changeFormTypeByLogin(){
            this.$emit("sendtypefromlogin",2);
        },
        changCode() {
            ccc.src = "/code?t=" + Math.random();
        }
    }
}
</script>

<style>
</style>